<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Basic drawing</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Java, Java 2D, tutorial, basic drawing, programming, Graphics, multiplatform">
<meta name="description" content="In this part of the Java 2D tutorial, we do some basic drawing.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Basic drawing</h1>

<p>
In this part of the Java 2D tutorial, we will do some basic drawing. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>Points</h2>

<p>
The most simple graphics primitive is point. It is a single dot on the 
window. There is no method to to draw a point. We used the <code>drawLine()</code>
method, where we supplied one point twice. 
</p>

<div class="codehead">Points.java</div>
<pre class="code">
package points;

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Insets;

import javax.swing.JPanel;
import javax.swing.JFrame;

import java.util.Random;


public class Points extends JPanel {

  public void paintComponent(Graphics g) {
      super.paintComponent(g);

      Graphics2D g2d = (Graphics2D) g;

      g2d.setColor(Color.blue);

      Dimension size = getSize();
      Insets insets = getInsets();

      int w =  size.width - insets.left - insets.right;
      int h =  size.height - insets.top - insets.bottom;

      Random r = new Random();

      for (int i=0; i<1000; i++) {
          int x = Math.abs(r.nextInt()) % w;
          int y = Math.abs(r.nextInt()) % h;
          g2d.drawLine(x, y, x, y);
      }
  }

  public static void main(String[] args) {

      JFrame frame = new JFrame("Points");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.add(new Points());
      frame.setSize(250, 200);
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
  }
}
</pre>

<p>
One point is difficult to observe. Why not paint 1000 of them? 
In our example, we do so. We draw 1000 blue points on the panel. 
</p>

<pre class="explanation">
  g2d.setColor(Color.blue);
</pre>

<p>
We will paint our points in blue color.
</p>


<pre class="explanation">
 Dimension size = getSize();
 Insets insets = getInsets();
</pre>

<p>
The size of the window includes borders and titlebar. We don't paint there.
</p>


<pre class="explanation">
 int w =  size.width - insets.left - insets.right;
 int h =  size.height - insets.top - insets.bottom;
</pre>

<p>
Here we calculate the area, where we will effectively paint our points. 
</p>

<pre class="explanation">
 Random r = new Random();
 int x = Math.abs(r.nextInt()) % w;
 int y = Math.abs(r.nextInt()) % h;
</pre>

<p>
We get a random number in range of the size of area, that we computed above.
</p>


<pre class="explanation">
 g2d.drawLine(x, y, x, y);
</pre>

<p>
Here we draw the point. As I already said, we use a 
<code>drawLine()</code> method. We specify the same point twice.
</p>


<img src="/img/gfx/java2d/points.png" alt="Points">
<div class="figure">Figure: Points</div>



<h2>Lines</h2>

<p>
A line is a simple graphics primitive. To draw a line, we use the 
<code>drawLine()</code> method.
</p>

<div class="codehead">Lines.java</div>
<pre class="code">
package com.zetcode;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class Lines extends JFrame {

    int coords[][];
    int count;

    public Lines() {
        initUI();
    }

    public final void initUI() {

        coords = new int[100][2];
        count = 0;

        JPanel panel = new JPanel();
        panel.setLayout(null);

        setTitle("Lines");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(300, 200);
        setLocationRelativeTo(null);
        
        addMouseListener(new MouseAdapter() {

            @Override
            public void mousePressed(MouseEvent event) {
                if (event.getButton() == MouseEvent.BUTTON1) {

                    int x = event.getX();
                    int y = event.getY();

                    coords[count][0] = x;
                    coords[count][1] = y;
                    count++;
                }

                if (event.getButton() == MouseEvent.BUTTON3) {
                    drawLines();
                    count = 0;
                }
            }
        });
    }

    public void drawLines() {

        Graphics g = this.getGraphics();

        Graphics2D g2d = (Graphics2D) g;

        int w = getWidth();
        int h = getHeight();

        RenderingHints rh =
                new RenderingHints(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_ON);

        rh.put(RenderingHints.KEY_RENDERING,
                RenderingHints.VALUE_RENDER_QUALITY);

        g2d.setRenderingHints(rh);

        g2d.clearRect(0, 0, w, h);


        for (int i = 0; i &lt; count - 1; i++) {
            for (int j = 0; j &lt; count - 1; j++) {
                g2d.drawLine(coords[i][0], coords[i][1],
                        coords[j][0], coords[j][1]);
            }
        }
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {

            @Override
            public void run() {
                Lines lns = new Lines();
                lns.setVisible(true);
            }
        });

    }
}
</pre>

<p>
In our example, we will draw a lot of lines. Click a lot on the 
panel with the left mouse button. After that, click with a right 
button. Each of the dots where you clicked will be connected with other dots. 
This way we create a complex structure. 
</p>

<img src="/img/gfx/java2d/lines.png" alt="Lines">
<div class="figure">Figure: Lines</div>



<h2>BasicStroke</h2>

<p>
The <b>BasicStroke</b> class defines a basic set of 
rendering attributes for the outlines of graphics primitives. These 
rendering attributes include width, end caps, line joins, miter limit and dash attributes. 
</p>

<div class="codehead">BasicStrokes.java</div>
<pre class="code">
import java.awt.BasicStroke;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class BasicStrokes extends JPanel {

    public void paintComponent(Graphics g) {
            super.paintComponent(g); 

            Graphics2D g2d = (Graphics2D) g;

            float[] dash1 = { 2f, 0f, 2f };
            float[] dash2 = { 1f, 1f, 1f };
            float[] dash3 = { 4f, 0f, 2f };
            float[] dash4 = { 4f, 4f, 1f };

            g2d.drawLine(20, 40, 250, 40);

            BasicStroke bs1 = new BasicStroke(1, BasicStroke.CAP_BUTT, 
                BasicStroke.JOIN_ROUND, 1.0f, dash1, 2f );

            BasicStroke bs2 = new BasicStroke(1, BasicStroke.CAP_BUTT, 
                BasicStroke.JOIN_ROUND, 1.0f, dash2, 2f );

            BasicStroke bs3 = new BasicStroke(1, BasicStroke.CAP_BUTT, 
                BasicStroke.JOIN_ROUND, 1.0f, dash3, 2f );

            BasicStroke bs4 = new BasicStroke(1, BasicStroke.CAP_BUTT, 
                BasicStroke.JOIN_ROUND, 1.0f, dash4, 2f );

            g2d.setStroke(bs1);
            g2d.drawLine(20, 80, 250, 80);

            g2d.setStroke(bs2);
            g2d.drawLine(20, 120, 250, 120);

            g2d.setStroke(bs3);
            g2d.drawLine(20, 160, 250, 160);

            g2d.setStroke(bs4);
            g2d.drawLine(20, 200, 250, 200);

    }


    public static void main(String[] args) {

        JFrame frame = new JFrame("BasicStroke");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new BasicStroke());
        frame.setSize(280, 270);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>

<p>
In this example, we show various types of dashes. A dash attribute is a pattern, 
which is created by mixing opaque and transparent sections. 
</p>

<pre class="explanation">
 float[] dash1 = { 2f, 0f, 2f };
 float[] dash2 = { 1f, 1f, 1f };
 float[] dash3 = { 4f, 0f, 2f };
 float[] dash4 = { 4f, 4f, 1f };
</pre>

<p>
Here we define four different dash patterns. 
</p>

<pre class="explanation">
 BasicStroke bs1 = new BasicStroke(1, BasicStroke.CAP_BUTT, 
     BasicStroke.JOIN_ROUND, 1.0f, dash1, 2f );
</pre>

<p>
Construction of a typical <code>BasicStroke</code> object. 
</p>

<pre class="explanation">
 g2d.setStroke(bs1);
</pre>

<p>
We use the <code>setStroke()</code> method to apply the 
<code>BasicStroke</code> to the current graphics context. 
</p>

<pre class="explanation">
 g2d.drawLine(20, 80, 250, 80);
</pre>

<p>
Finally, we draw the line. 
</p>


<img src="/img/gfx/java2d/basicstroke.png" alt="BasicStroke">
<div class="figure">Figure: BasicStroke</div>


<h2>Caps</h2>

<p>
Caps are decorations applied to the ends of unclosed subpaths and dash segments. 
There are three different end caps
in Java 2D. CAP_BUTT, CAP_ROUND, and CAP_SQUARE.
</p>

<div class="codehead">Caps.java</div>
<pre class="code">
package com.zetcode.caps;

import java.awt.BasicStroke;
import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.RenderingHints;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class Caps extends JPanel {


    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        Graphics2D g2d = (Graphics2D)g;

        RenderingHints rh = new RenderingHints(
            RenderingHints.KEY_ANTIALIASING,
            RenderingHints.VALUE_ANTIALIAS_ON);

        rh.put(RenderingHints.KEY_RENDERING, 
            RenderingHints.VALUE_RENDER_QUALITY);

        g2d.setRenderingHints(rh);

        BasicStroke bs1 = new BasicStroke(8, BasicStroke.CAP_BUTT, 
            BasicStroke.JOIN_BEVEL);
        g2d.setStroke(bs1);
        g2d.drawLine(20, 30, 250, 30);

        BasicStroke bs2 = new BasicStroke(8, BasicStroke.CAP_ROUND, 
            BasicStroke.JOIN_BEVEL);
        g2d.setStroke(bs2);
        g2d.drawLine(20, 80, 250, 80);

        BasicStroke bs3 = new BasicStroke(8, BasicStroke.CAP_SQUARE, 
            BasicStroke.JOIN_BEVEL);
        g2d.setStroke(bs3);
        g2d.drawLine(20, 130, 250, 130);

        BasicStroke bs4 = new BasicStroke();
        g2d.setStroke(bs4);

        g2d.drawLine(20, 20, 20, 140);
        g2d.drawLine(250, 20, 250, 140);
        g2d.drawLine(254, 20, 254, 140);
    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Caps");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Caps());
        frame.setSize(300, 200);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>


<p>
In our example, we show all three types of end caps. 
</p>

<pre class="explanation">
 g2d.drawLine(20, 20, 20, 140);
 g2d.drawLine(250, 20, 250, 140);
 g2d.drawLine(254, 20, 254, 140);
</pre>

<p>
We draw three vertical lines to explain the differences among the end caps. 
Lines with CAP_ROUND and CAP_SQUARE are bigger than the line with CAP_BUT. 
Exactly how much bigger depends on the 
line size. In our case a line is 8px thick. Lines are bigger by 8px, 4px 
on the left and 4px on the right. 
It is clear from the picture. 
</p>


<img src="/img/gfx/java2d/caps.png" alt="Caps">
<div class="figure">Figure: Caps</div>


<h2>Joins</h2>

<p>
Line joins are decorations applied at the intersection of two path segments and 
at the intersection of the endpoints of a subpath.  There are three decorations are. 
JOIN_BEVEL, JOIN_MITER, and JOIN_ROUND.
</p>

<div class="codehead">Caps.java</div>
<pre class="code">
package com.zetcode.joins;

import java.awt.BasicStroke;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class Joins extends JPanel {


    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        Graphics2D g2d = (Graphics2D)g;

        BasicStroke bs1 = new BasicStroke(8, BasicStroke.CAP_ROUND, 
            BasicStroke.JOIN_BEVEL);
        g2d.setStroke(bs1);
        g2d.drawRect(15, 15, 80, 50);

        BasicStroke bs2 = new BasicStroke(8, BasicStroke.CAP_ROUND, 
            BasicStroke.JOIN_MITER);
        g2d.setStroke(bs2);
        g2d.drawRect(125, 15, 80, 50);

        BasicStroke bs3 = new BasicStroke(8, BasicStroke.CAP_ROUND, 
            BasicStroke.JOIN_ROUND);
        g2d.setStroke(bs3);
        g2d.drawRect(235, 15, 80, 50);

    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Joins");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Joins());
        frame.setSize(340, 110);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>

<p>
This code example show three different line joins in action.
</p>

<pre class="explanation">
 BasicStroke bs1 = new BasicStroke(8, BasicStroke.CAP_ROUND, 
     BasicStroke.JOIN_BEVEL);
 g2d.setStroke(bs1);
 g2d.drawRect(15, 15, 80, 50);
</pre>

<p>
Here we create a rectangle with a JOIN_BEVEL join. 
</p>


<img src="/img/gfx/java2d/joins.png" alt="Joins">
<div class="figure">Figure: Joins</div>


<p>
In this part of the Java 2D tutorial, we did some basic drawing.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 7, 2008  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

